<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="Bootstrap-Admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="../plugins/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../plugins/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
    <link rel="stylesheet" href="../plugins/bootstrap-table/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="../plugins/@eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css"/>
    <title>Bootstrap-Admin - 开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-light pt-2">
<div class="container-fluid">
    <div class="card border-0 shadow-sm">
        <div class="card-body">

            <form class="row row-cols-lg-auto g-3 align-items-center justify-content-center">
                <div class="col-12">
                    日期范围:
                </div>
                <div class="col-12">
                    <div class="input-group">
                        <input type="text" readonly class="form-control" aria-label="q" placeholder="开始时间" name="beginTime" id="beginTime">
                        <span class="input-group-text"><i class="bi bi-arrow-left-right"></i> </span>
                        <input type="text" readonly class="form-control" aria-label="q" placeholder="结束时间" name="endTime" id="endTime">
                    </div>
                </div>
                <div class="col-12">
                    <input type="text" class="form-control" name="keyword" aria-label="q"
                           placeholder="事项名称、xx">
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary" onclick="querySearch()"><i class="bi bi-search"></i>
                        搜xx
                    </button>
                    <button type="submit" class="btn btn-primary" onclick="restSearch()"><i class="bi bi-x-circle"></i>
                        重置
                    </button>
                </div>

            </form>
            <hr>

            <div class="d-flex  gap-1 my-3">
                <button class="btn btn-danger"><i class="bi bi-trash"></i> 批量删除</button>
                <button class="btn btn-success"
                        onclick="BSA.Modal.show({title: '添加xx',body:'ewqweq',modalDialogClass:'modal-dialog-centered modal-lg',url:'add.html'})">
                    <i class="bi bi-plus"></i> 添加xx
                </button>
            </div>

            <table id="table"></table>

        </div>
    </div>
</div>

<script src="../plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>

<script src="../plugins/jquery/dist/jquery.min.js"></script>

<!--日期时间-->
<script src="../plugins/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="../plugins/@eonasdan/tempus-dominus/dist/js/tempus-dominus.min.js"></script>
<script src="../plugins/@eonasdan/tempus-dominus/dist/plugins/customDateFormat.js"></script>

<!--bootstrap-table-->
<script src="../plugins/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="../plugins/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>

<script>

    /**
     * columns表示列，里面的对象 title是表头信息，field是服务端返回的字段名称
     * 1.不做分页，返回的数据格式是 [{},{}]
     * 2.如果要开启分页，需要配置pagination:true, sidePagination:'client|server'
     * 3.客户端分页所需要的格式和不做分页时是一样的 都是 :[{},{}]
     * 4.服务端分页返回的格式为：{rows:[{},{}],total:200}
     * 参考：https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data2.json
     */
    $('#table').bootstrapTable({
        locale: 'zh-CN',
        //设置高度，就可以固定表头，用户体验良好
        height: 380,
        //jsonplaceholder提供的api服务模拟请求，开发时大家换成自己的接口
        url: 'http://jsonplaceholder.typicode.com/todos',
        //是否开启分页
        pagination: true,
        //是客户端分页还是服务端分页  'client','server',由于演示没有后端提供服务，所以采用前端分页演示
        sidePagination: 'client',
        //配置分页大小
        pageList: [10, 15, 20],
        //params是一个对象
        queryParams: function (params) {
            params.q = $('input[name=keyword]').val();//因为jsonplaceholder的搜索必须是q
            params.beginTime= $('#beginTime').val();
            params.endTime =  $('#endTime').val();//还有什么参数以此类推
            return params;
        },
        //列
        columns: [
            {
                title: 'ID',
                field: 'id',
                align: 'center'
            },
            {
                title: '用户id',
                field: 'userId',
                align: 'center'
            },
            {
                title: '事项名称',
                field: 'title',
                align: 'center',
            },
            {
                title: '是否完成',
                field: 'completed',
                align: 'center',
                formatter: formatCompleted
            },
            {
                title: '操作',
                align: 'center',
                formatter: formatAction
            }
        ]
    });

    //格式化列数据演示 val:当前数据 rows:当前整行数据
    function formatCompleted(val, rows) {
        return val === true ? '<span class="badge bg-success">已完成</span>' : '<span class="badge bg-warning text-dark">未完成</span>';
    }

    //格式化操作列
    function formatAction(val, rows) {
        return `<button class="btn btn-info">编辑</button> <button onclick="delUser(${rows.id})" class="btn btn-danger">删除</button>`;
    }


    //删除用户
    function delUser(id) {
        alert(id);
    }

    //搜索处理
    function querySearch() {
        $('#table').bootstrapTable('refresh');
        $('#table').bootstrapTable('selectPage', 1)//跳转到第一页
    }

    //重置
    function restSearch(){

        $('input[name=keyword]').val('');
        $('#beginTime').val('');
        $('#endTime').val('');

        $('#table').bootstrapTable('refresh');
        $('#table').bootstrapTable('selectPage', 1)//跳转到第一页
    }




</script>

<script>
    //自定义日期格式插件
    tempusDominus.extend(window.tempusDominus.plugins.customDateFormat);
    let td6 = new tempusDominus.TempusDominus(document.getElementById('beginTime'), {
        //本地化控制
        localization: {
            format: 'yyyy-MM-dd HH:mm:ss',
        },
        //布局控制
        display: {
            //视图模式(选择年份视图最先开始)
            viewMode: 'calendar',
            components: {
                //是否开启日历，false:则是时刻模式
                calendar: true,
                //支持年份选择
                year: true,
                //是否开启月份选择
                month: true,
                //支持日期选择
                date: true,
                //底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效
                clock: true,
                //时
                hours: true,
                //分
                minutes: true,
                //秒
                seconds: true,
                //是否使用24小时制,比如3.15分会变成15.15
                useTwentyfourHour: true,
            },
            //图标
            icons: {
                time: 'bi bi-clock',
                date: 'bi bi-calendar',
                up: 'bi bi-arrow-up',
                down: 'bi bi-arrow-down',
                previous: 'bi bi-chevron-left',
                next: 'bi bi-chevron-right',
                today: 'bi bi-calendar-check',
                clear: 'bi bi-trash',
                close: 'bi bi-x',
            },
            //视图底部按钮
            buttons: {
                today: true,
                clear: true,
                close: true,
            },
        }
    });
    let td7 = new tempusDominus.TempusDominus(document.getElementById('endTime'), {
        //本地化控制
        localization: {
            format: 'yyyy-MM-dd HH:mm:ss',
        },
        //布局控制
        display: {
            //视图模式(选择年份视图最先开始)
            viewMode: 'calendar',
            components: {
                //是否开启日历，false:则是时刻模式
                calendar: true,
                //支持年份选择
                year: true,
                //是否开启月份选择
                month: true,
                //支持日期选择
                date: true,
                //底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效
                clock: true,
                //时
                hours: true,
                //分
                minutes: true,
                //秒
                seconds: true,
                //是否使用24小时制,比如3.15分会变成15.15
                useTwentyfourHour: true,
            },
            //图标
            icons: {
                time: 'bi bi-clock',
                date: 'bi bi-calendar',
                up: 'bi bi-arrow-up',
                down: 'bi bi-arrow-down',
                previous: 'bi bi-chevron-left',
                next: 'bi bi-chevron-right',
                today: 'bi bi-calendar-check',
                clear: 'bi bi-trash',
                close: 'bi bi-x',
            },
            //视图底部按钮
            buttons: {
                today: true,
                clear: true,
                close: true,
            },
        }
    });
    td6.subscribe(tempusDominus.Namespace.events.change, (e) => {
        td7.updateOptions({
            restrictions: {
                minDate: e.date,
            },
        });
    });
    td7.subscribe(tempusDominus.Namespace.events.change, (e) => {
        td6.updateOptions({
            restrictions: {
                maxDate: e.date,
            },
        });
    });
</script>
</body>
</html>